<!doctype html>
<html lang="en">
  <head>
    <script type="module" crossorigin src="/frontend-mini-challenges/javascript/assets/index-CYkipbeB.js"></script>
    <link rel="modulepreload" crossorigin href="/frontend-mini-challenges/javascript/assets/navbar-PAFhV-cJ.js">
    <link rel="modulepreload" crossorigin href="/frontend-mini-challenges/javascript/assets/header-DIqzw3PH.js">
    <link rel="stylesheet" crossorigin href="/frontend-mini-challenges/javascript/assets/navbar-Dkne97UN.css">
    <link rel="stylesheet" crossorigin href="/frontend-mini-challenges/javascript/assets/header-DAZPOirm.css">
    <link rel="stylesheet" crossorigin href="/frontend-mini-challenges/javascript/assets/index-Bt5k4sd3.css">
  </head>
  <body>
    <main class="container converter">
      <h1 class="sr-only">Currency Converter</h1>

      <form id="converterForm" class="converter-form">
        <div class="input-group">
          <label for="amount">Amount</label>
          <div class="input-with-select">
            <input
              type="number"
              id="amount"
              name="amount"
              min="0"
              step="0.01"
              placeholder="Enter amount"
              aria-required="true"
              aria-describedby="amount-help"
              inputmode="decimal"
            />
            <select
              id="fromCurrency"
              name="fromCurrency"
              aria-label="Convert from currency"
              required
            >
              <!-- Options will be populated by JavaScript -->
            </select>
          </div>
          <p id="amount-help" class="help-text">Enter the amount you want to convert</p>
        </div>

        <div class="input-group">
          <label for="result">Result</label>
          <div class="input-with-select">
            <input
              type="text"
              id="result"
              name="result"
              placeholder="Result"
              readonly
              aria-readonly="true"
              tabindex="-1"
            />
            <select id="toCurrency" name="toCurrency" aria-label="Convert to currency" required>
              <!-- Options will be populated by JavaScript -->
            </select>
          </div>
        </div>

        <button type="submit" id="convertButton" class="btn-primary">
          <span class="btn-icon" aria-hidden="true"> </span>
          <span>Convert</span>
        </button>
      </form>

      <div class="add-currency">
        <h4>Add Custom Currency</h4>
        <div class="input-group">
          <label for="customCurrency" class="sr-only">Custom Currency Code</label>
          <div class="input-with-button">
            <input
              type="text"
              id="customCurrency"
              name="customCurrency"
              placeholder="e.g., CAD"
              pattern="[A-Za-z]{3}"
              maxlength="3"
              aria-describedby="currency-help"
              aria-required="true"
            />
            <button type="button" id="addCurrencyButton" class="btn-secondary">
              <span class="btn-icon" aria-hidden="true">+</span>
              <span>Add Currency</span>
            </button>
          </div>
          <p id="currency-help" class="help-text">
            Enter a 3-letter currency code (e.g., CAD, JPY, AUD)
          </p>
        </div>
      </div>

      <div id="errorContainer" class="error-message" role="alert" aria-live="assertive"></div>
    </main>
  </body>
</html>
